<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>

<body>


  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>


  <style>
    html {
      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      /* border: 20px solid white; */
      border-radius: 50%;
      background-image: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1364898764,1035776806&fm=27&gp=0.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1),
      inset 0 0 0 3px #EFEFEF,
      inset 0 0 10px black,
      0 0 10px rgba(0, 0, 0, 0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px);
      /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      /* let it start at 12 o'clock*/
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

    .hour-hand {
      left: 20%;
      width: 30%;
    }

    .min-hand {
      left: 15%;
      width: 35%;
    }

    .min-hand {
      left: 3%;
      width: 47%;
    }
  </style>


  <script>
    const secondHand = document.querySelector('.second-hand')
    const minuteHand = document.querySelector('.min-hand')
    const hourHand = document.querySelector('.hour-hand')

    function setDate() {
      const now = new Date()

      const hours = now.getHours()
      const minutes = now.getMinutes()
      const seconds = now.getSeconds()

      console.log(seconds)
      if (seconds == 0) {
        hourHand.style.transition = 'all 0s'
        minuteHand.style.transition = 'all 0s'
      }
        const secondsDegrees = (seconds / 60) * 360 + 90
        secondHand.style.transform = `rotate(${secondsDegrees}deg)`

        const hoursDegrees = (hours / 12) * 360 + 90 + (minutes / 60) * 30
        hourHand.style.transform = `rotate(${hoursDegrees}deg)`

        const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90
        minuteHand.style.transform = `rotate(${minutesDegrees}deg)`
      

    }


    setInterval(setDate, 1000)
  </script>
</body>

</html>